<template>
  <div id="main">
    <div style="top: 0;width: 100%;height: 100px;text-align: center">
      <p style="font-size: xx-large">rahwi用户注册</p>
    </div>
    <el-form ref="form" class="form" :model="uregister" :rules="rules" :hide-required-asterisk = false>
      <div id="formdiv">
        <el-row>
          <el-col :span="24">
            <p align="left" style="color: red"> username </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" v-model="uregister.username" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <p align="left" style="color: red"> email address </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="email">
            <el-input placeholder="请输入邮箱地址" v-model="uregister.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <p align="left" style="color: red"> password</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="uregister.password" type="password">

            </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <p align="left" style="color: red">repeat password</p>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="repassword">
            <el-input placeholder="请输入确认密码" v-model="uregister.repassword" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >

          <el-col >
            <el-button v-on:click="register">
              注册
            </el-button>
          </el-col>
        </el-row>
      </div>

    </el-form>
  </div>
</template>

<script>
export default {
  name: "register",
  data(){
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.uregister.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      uregister:{
        username:null,
        email:null,
        password:null,
        repassword:null
      },
      rules: {
        username: [{required: true, message: "用户名不能为空",trigger:'blur'}],
        email: [{required: true, message: "邮箱不能为空"}],
        password: [{required: true, message: "密码不能为空"}],
        repassword: [{validator: validatePass2,trigger:'blur'}]
      }
    }
  },
  methods:{
    /**
     * 用户注册:
     * Post
     * url:'register/user',
     * request body:{
     *  uregister:{
          username:"",
          email:"",
          password:""
         }
     * }
     * response data:{
     *    code:,
     *    msg:,
     *    success:,
     *    data:{
     *      null
     *    }
     * }
     *
     */

    verify(){
      var res = true
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          console.log('register submit!');
        } else {
          this.$alert('error submit!');
          res = false
        }
      })
      return res
    },
    async register() {
      if(this.verify()) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.85)',
          fullscreen: true
        })

        try {
          var response = await this.$http.post('/api/register/user', this.uregister)
          console.log(response.data)
          var result = response.data
          var success = result.success
          if (success) {
            this.$message.success("注册成功，正在跳转...")
            await this.$alert("注册成功")
            await this.jumpTo("/login", 3000)
          }
          else {
            var code = result.code
            var msg = result.msg
            this.$alert("注册失败：" + code + ":" + msg)
          }
        } catch(err) {
            this.$alert("注册失败："+err)
            this.uregister = {
              UserName: "",
              Email: "",
              Password: ""
            }
        } finally{
          loading.close()
        }
      }

    },
    async jumpTo(url,t){
      setTimeout(()=>{
        this.$router.push(url)
      },t)
    }
  }
}
</script>

<style scoped>

#main{
  width: calc(100%);
  height: calc(100%);
  position: fixed;
}
#formdiv{
  top: calc(50% - 250px);
  width: 800px;
  height: fit-content;
  position: fixed;
  transform: translate(-50%);
  left: 50%;
}
</style>
